<template>
  <v-app dark>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar :clipped-left="clipped" fixed app>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-btn icon @click.stop="miniVariant = !miniVariant">
        <v-icon>mdi-{{ `chevron-${miniVariant ? "right" : "left"}` }}</v-icon>
      </v-btn>
      <v-btn icon @click.stop="clipped = !clipped">
        <v-icon>mdi-application</v-icon>
      </v-btn>
      <v-btn icon @click.stop="fixed = !fixed">
        <v-icon>mdi-minus</v-icon>
      </v-btn>
      <v-btn icon @click.stop="$vuetify.theme.dark = false">
        <v-icon>白</v-icon>
      </v-btn>
      <v-btn icon @click.stop="$vuetify.theme.dark = true">
        <v-icon>黑</v-icon>
      </v-btn>
      <v-toolbar-title v-text="title" />
      <v-spacer />
      <v-btn icon v-if="$store.state.auth.user">
        {{ $store.state.auth.user.username }}
      </v-btn>
      <v-btn icon @click="isShowLoginForm = true" v-else>
        <v-icon>mdi-login</v-icon>
      </v-btn>
    </v-app-bar>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <v-footer :fixed="fixed" app>
      <span>&copy; {{ new Date() }}</span>
    </v-footer>

    <v-dialog
      v-model="isShowLoginForm"
      width="500px"
      persistent
      v-if="!$store.state.auth.user"
    >
      <v-card class="elevation-12">
        <v-toolbar color="primary" dark flat>
          <v-toolbar-title>登录</v-toolbar-title>
          <v-spacer />
          <v-btn @click="isShowLoginForm = false" icon large>
            <v-icon large>mdi-close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text>
          <v-form class="pa-3">
            <v-text-field
              label="用户名"
              name="login"
              v-model="loginModel.username"
              type="text"
              clearable
            />
            <v-text-field
              label="密码"
              v-model="loginModel.password"
              name="password"
              type="password"
              autocomplete="new-password"
              clearable
            />
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" type="submit" @click="login">登录</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      clipped: false,
      drawer: true,
      fixed: false,
      isShowLoginForm: false,
      loginModel: {},
      items: [
        {
          icon: "mdi-home",
          title: "首页",
          to: "/"
        },
        {
          icon: "mdi-apps",
          title: "课程列表",
          to: "/courses"
        }
      ],
      miniVariant: false,
      theme: false,
      title: "全栈世界"
    };
  },
  methods: {
    async login() {
      try {
        let response = await this.$auth.loginWith("local", {
          data: this.loginModel
        });
        console.log(response);
        this.isShowLoginForm = false;
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>
